<template>
  <div>
    <div class="imgbig">
    </div>
    <div class="container" v-if="count.length!=0">
      <div class="active-outer">
        <div class="active-content">
        <span>景点详情</span>
        </div>
      </div>

      <div class="all" v-if="count.length!=0">
        <div class="left">
          <div class="img">
            <img :src="`${count[0].imgone}`" alt="">
          </div>
        </div>

        <div class="right">
          <div class="titlespan">
            <span>{{count[0].title}}</span>
          </div>
          <div class="price">
            <span>价格:</span>
            <span>￥0.00</span>
          </div>
          <div class="adress">
            <span>地址:</span>
            <span>老君山景区内</span>
          </div>
          <div class="brief">
            <span>简介:</span>
            <div>{{count[0].count}}</div>
          </div>
          <div class="btn">
            <div class="btn-left">
              <a><span>马上咨询</span></a>
            </div>
            <div class="btn-right">
              <a><span>预约</span></a>
            </div>
          </div>
        </div>
      </div>
      <div v-else></div>

      <div class="spot">
        <div class="spot-nei">
          <span>景点详情</span>
        </div>
      </div>

      <div style="width:1100px">
        <img :src="`${count[0].imgtwo}`" alt="" style="width:100%">
      </div>
      <div style="width:1100px">
        <img :src="`${count[0].imgthree}`" alt="" style="width:100%">
      </div>
    </div>
    <div v-else></div>
  </div>
</template>
<script>
export default {
  props:['id'],
  data() {
    return {
      count:[],
    }
  },
  mounted() {
    this.axios(`/text?id=${this.id}`).then(result=>{
      console.log(result.data.result);
      this.count=result.data.result;
    })
  },
}
</script>
<style scoped>
.imgbig{
  min-width: 1100px;
  height: 300px;
  background-image: url(/img/detail/one.jpg);
}
.container {
  max-width: 1100px;
  min-width: 1000px;
  margin: 0 auto;
}
.container .active-content > span {
  color: #ff6637;
  font-size: 18px;
  font-family: "微软雅黑";
}
.container .active-outer {
  height: 50px;
  border-bottom: 1px solid #eaeaea;
  display: flex;
  align-items: center;
}
.container .active-content {
  width: 80px;
  height: 50px;
  line-height: 50px;
  border-bottom: 2px solid #ff6637;
}
.container .all{
  display: flex;
}
.container .left{
  width: 500px;
}
.container .left .img{
  width: 400px;
  margin-top: 30px;
  margin-left: 20px;
}
.container .left .img img{
  width: 100%;
}
.container .right{
  width: 550px;
  margin: 30px;
  height: 400px;
}
.container .right .titlespan{
  color: #585858;
  font-size: 20px;
  text-align: left;
}
.container .right .price{
  margin-top: 30px;
  margin-left: 20px;
}
.container .right .price span:nth-child(2){
  color: #ff6537;
  font-size: 40px;
  font-weight: bold;
}
.container .right .adress{
  margin-top: 20px;
  margin-left: 20px;
}
.container .right .brief{
  margin-top: 20px;
  margin-left: 20px;
  display: flex;
}
.container .right .brief>div{
  width: 450px;
  margin-top: -5px;
  line-height: 25px;
}
.container .right .btn{
  display: flex;
}
.container .right .btn .btn-left{
  width: 162px;
  height: 42px;
  text-align: center;
  line-height: 42px;
  margin-top: 35px;
  color: #ff6537;
  border: 1px solid #ff6537;
  border-radius: 5px;
}
.container .right .btn .btn-right{
  width: 162px;
  height: 42px;
  text-align: center;
  line-height: 42px;
  margin-top: 35px;
  margin-left: 15px;
  background-color: #ff6537;
  border-radius: 5px;
  color: #fff;
}
.container .spot{
  border:2px solid #eaeaea;
  height: 57px;
  margin-bottom: 30px;
}
.container .spot-nei{
  width: 150px;
  line-height: 57px;
  color: #ff6537;
  text-align: center;
  border-top: 5px solid #ff6537;
  border-right: 2px solid #eaeaea;
}
</style>